<template>
  <div class="lcds-root-container">
    <div class="lc-list-view">
      <lc-rower class="lc-list-view__title" style="align-items: center">
        <lc-svg-icon
          class="lc-svg-icon"
          icon-class="list-view-line"
          style="color: #1d70f5; margin-right: 12px"
        ></lc-svg-icon>
        <span class="lc-label" style="--font-size: 16px"> 筛选结果 </span>
      </lc-rower>
      <ListFilter
        v-show="filterVisible"
        ref="filterRef"
        @search="handleSearchListView"
      /><lc-block :columns="2" class="lc-list-view__toolbar">
        <lc-rower
          style="
            --width: 20%;
            flex-basis: calc(20% - 10px);
            align-items: center;
          "
        >
          <lc-svg-icon
            class="lc-svg-icon"
            icon-class="list-view-line"
            style="color: #1d70f5; margin-right: 12px"
          ></lc-svg-icon>
          <span class="lc-label" style="--font-size: 16px; --fontSizeValue: 16">
            查询结果
          </span>
        </lc-rower>

        <lc-rower
          class="lc-list-view__toolbar-tools"
          style="
            --width: 80%;
            flex-basis: calc(80% - 10px);
            justify-content: flex-end;
          "
        >
          <el-button
            class="lc-button"
            type="primary"
            @click="showOpener01({}, 'add')"
          >
            <lc-svg-icon
              class="lc-svg-icon"
              icon-class="materials_plus"
            ></lc-svg-icon>

            新增
          </el-button>
          <lc-excel-export :data="excelExportData" label="导出">
            <lc-svg-icon
              class="lc-svg-icon"
              icon-class="materials_table_export"
            ></lc-svg-icon>
          </lc-excel-export>
          <lc-excel-import
            class="lc-excel-import"
            :connectors="excelImportConnectors"
            label="导入"
          >
            <lc-svg-icon
              class="lc-svg-icon"
              icon-class="materials_table_import"
            ></lc-svg-icon>
          </lc-excel-import>
          <el-button
            class="lc-button"
            @click="handleClickDeleteItemOfListViewByBatch"
          >
            删除
          </el-button>
          <lc-table-column-filter v-model="tableColumns" selectedKey="showFlag">
            <el-button class="lc-button"> 更多显示列··· </el-button>
          </lc-table-column-filter>
        </lc-rower>
      </lc-block>
      <el-table
        ref="tableRef"
        class="lc-table"
        :data="tableData"
        :row-key="tableRowKey"
        :highlight-current-row="true"
        @row-click="handleTableRowClick"
        @selection-change="handleTableSelectionChange"
        :border="true"
      >
        <el-table-column type="selection"></el-table-column>

        <template v-for="(col, index) in tableColumns">
          <el-table-column
            v-if="col.showFlag"
            :key="col.prop + '_' + index"
            :prop="col.prop"
            :label="col.label"
            v-bind="col.attrs"
          >
          </el-table-column>
        </template>

        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          header-align="center"
          :width="100"
          min-width="100px"
        >
          <template #default="scope">
            <div class="lc-table__operateColumn__buttonWrapper"></div>
          </template>
        </el-table-column>
      </el-table>
      <lc-pagination
        ref="pagerRef"
        :background="true"
        @current-change="handleCurrentPageChange"
        @size-change="handlePageSizeChange"
      ></lc-pagination>
    </div>
    <DialogAddWarehose
      v-if="opener01.show"
      :form-data="opener01"
      @submit="resetListView"
    />
  </div>
</template>

<script setup>
import { onMounted, ref, unref } from "vue";

import ListFilter from "./components/listFilter/index.vue";
import { request } from "@/apis/request";
import useListView from "@hooks/uwdp/list-view";
import uwdpOpener from "@hooks/uwdp/opener";
import DialogAddWarehose from "./dialogs/addWarehose/index.vue";
defineOptions({
  name: "Warehouse",
});

const excelExportData = ref({});
const excelImportConnectors = ref({});
const tableRef = ref(null);
const tableData = ref([]);
const tableColumns = ref([
  { label: "订单编码22", prop: "orderCode", showFlag: true, attrs: {} },
  { label: "订单名称11111", prop: "orderName", showFlag: true, attrs: {} },
  { label: "订单金额", prop: "orderAmount", showFlag: true, attrs: {} },
  { label: "订单商品数量", prop: "orderGoodsCount", showFlag: true, attrs: {} },
  { label: "创建时间", prop: "createTime", showFlag: true, attrs: {} },
  { label: "更新人id", prop: "updateBy", showFlag: true, attrs: {} },
  { label: "更新时间", prop: "updateTime", showFlag: true, attrs: {} },
]);
let tableMultipleSelection = [];
const tableRowKey = ref("id");
const pagerRef = ref(null);
const filterRef = ref(null);
const {
  filterData,
  filterVisible,
  deleteItemOfListView,
  setQueryMethod,
  setPageOptions,
  handleSearchListView,
  handleCurrentPageChange,
  handlePageSizeChange,
  handleToggleFilterOfListView,
  resetListView,
} = useListView(filterRef, true);
const { open: opener01, showOpener: showOpener01 } = uwdpOpener();

const handleClickDeleteItemOfListViewByBatch = () => {
  deleteItemOfListView(
    {
      url: "",
      method: "delete",
      params: { ...tableMultipleSelection },
    },
    "batch"
  );
};
const queryTableData = async () => {
  let params = {
    url: "",
    method: "get",
    params: {
      ...unref(filterData),
      pageIndex: pagerRef.value.pageOptions.pageIndex,
      pageSize: pagerRef.value.pageOptions.pageSize,
    },
  };
  const res = await request(params);
  if (res) {
    tableData.value = res?.data?.data || [];

    const { totalCount: total = 0 } = res?.data || {};
    pagerRef.value.pageOptions.total = total;
  }
};
const handleTableRowClick = (row) => {
  const alreadySelected = tableMultipleSelection.includes(row);
  unref(tableRef).toggleRowSelection(row, !alreadySelected);
};
const handleTableSelectionChange = (val) => {
  tableMultipleSelection = val;
};
const getTableSelectionData = () => {
  return tableMultipleSelection;
};

onMounted(() => {
  queryTableData();
  setPageOptions(pagerRef.value.pageOptions);
  setQueryMethod(queryTableData);
});
</script>
